<template>
    <div id="xl-app">
        <a-layout v-if="$store.getters.isInit">
            <a-layout-header>
                <div class="xl-head">
                    <div class="xl-head-left">
                        <div class="xl-head-logo" @click="$router.push('/')">
                            <a-icon type="code-sandbox"/>
                        </div>
                        <div class="xl-head-text" @click="$router.push('/')">
                            鼓楼后台管理
                        </div>
                        <a-menu
                                v-if="menuList.length>1"
                                theme="dark"
                                :defaultSelectedKeys="[checkedIndex]"
                                mode="horizontal"
                                class="xl-head-menu"
                                :style="{ lineHeight: '50px' }"
                        >
                            <a-menu-item :key="index" v-for="(item,index) in menuList" @click="checkMenu(item,index)">
                                {{item.systemMenuName}}
                            </a-menu-item>
                        </a-menu>
                    </div>
                    <div class="xl-head-right">
                        <div class="xl-head-item">
                            <a-dropdown placement="bottomCenter">
                                <a class="ant-dropdown-link">
                                    {{$store.getters.userInfo.userName || $store.getters.userInfo.loginUserName || '用户'}}
                                    <a-icon type="down"/>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item key="1" @click="$refs.rePassword.visible=true">
                                        修改密码
                                    </a-menu-item>
                                    <a-menu-item key="2" @click="layout">
                                        登出
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </div>
                    </div>
                </div>
            </a-layout-header>
            <a-layout>
                <a-layout-sider collapsible v-model="collapsed">
                    <xlMenu :menu-list="menuChecked"></xlMenu>
                </a-layout-sider>
                <a-layout-content>
                    <transition name="wrap">
                        <router-view class="wrap"/>
                    </transition>
                </a-layout-content>
            </a-layout>
        </a-layout>
        <rePassword ref="rePassword"></rePassword>
    </div>
</template>
<script>
    import xlMenu from '../components/xlMenu/index'
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
    import rePassword from '../components/rePassword/index'
    import {clearToken, getLocal, removeToken, setLocal} from "../assets/service/auth";
    import {initUserType} from "../assets/init_user_type";

    export default {
        name: "index",
        data() {
            return {
                collapsed: false,
                checkedIndex:Number(getLocal('checkedIndex')) || 0,
                menuList: this.$store.getters.menuList,
                menuChecked:this.$store.getters.menuChecked[0]?.childrenSystemMenuList || []
            }
        },
        components: {
            xlMenu,
            rePassword
        },
        methods: {
            layout() {
                this.$confirm({
                    title: '提示',
                    content: '确定要登出吗？',
                    onOk: () => {
                        removeToken()
                        clearToken('routerId')
                        clearToken('userInfo')
                        clearToken('checkedIndex')
                        clearToken('homeUrl')
                        this.$router.replace('/login')
                    }
                });
            },
            checkMenu(item,index){
                this.$store.dispatch('setMenuChecked',item)
                    .then(_=>{
                        setLocal('checkedIndex',index)
                        this.menuChecked = this.$store.getters.menuChecked[0]?.childrenSystemMenuList || []
                        console.log(this.menuChecked,77)
                    })
            }
        },
        beforeCreate() {
            if (!this.$store.getters.isInit) {
                try {
                    this.$store.dispatch('setUserInfo',JSON.parse(getLocal('userInfo'))|| {})
                        .then(_=>{
                            initUserType(this.$store.getters.userInfo)
                                .then(_ => {
                                    this.menuList = this.$store.getters.menuList
                                })
                                .then(_=>{
                                    this.$store.dispatch('setMenuChecked',this.menuList[this.checkedIndex])
                                        .then(_=>{
                                            this.menuChecked = this.$store.getters.menuChecked[0]?.childrenSystemMenuList || []
                                            console.log(this.$store.getters.menuChecked,77)
                                        })
                                })
                        })
                }catch (e) {
                    this.$message.error('初始化失败,请联系管理员')
                    this.$router.replace('/login')
                }



            }

        },
    }
</script>
<style scoped lang="less">
    #xl-app {
        width: 100%;
        height: 100%;
        position: relative;

        .ant-layout {
            width: 100%;
            height: 100%;

            .ant-layout-header {
                padding: 0;
                height: auto;
            }

            .xl-head {
                width: 100%;
                height: 50px;
                background-color: #243141;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #fff;
                box-shadow: 0 3px 3px rgba(0, 0, 0, .2);

                .ant-dropdown-link {
                    color: #fff;

                    .anticon.anticon-down {
                        font-size: 12px;
                    }
                }

                .xl-head-left {
                    display: flex;
                    align-items: center;
                }

                .xl-head-right {
                    display: flex;
                    align-items: center;
                }

                .xl-head-item {
                    min-width: 50px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .xl-head-item:last-child {
                    margin-right: 20px;
                }

                .xl-head-logo {
                    width: 50px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .xl-head-menu{
                    margin-left: 66px;
                }
                .anticon {
                    font-size: 20px;
                }
            }

            /deep/ .xl-menu {
                width: 50px;
                height: calc(100% - 50px);
                z-index: 2;
            }

            .wrap {
                background-color: #fff;
                width: 100%;
                height: 100%;
                overflow-y: scroll;
            }
        }
        .wrap-enter-active {
            transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .wrap-leave-active {
            transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .wrap-leave-to
            /* .slide-fade-leave-active for below version 2.1.8 */ {
            transform: translateX(10px);
            opacity: 0;
        }
    }
</style>
